<!DOCTYPE html>
<html lang="zh-CN" ng-app="root">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="vendors/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="css/angular-toolkit.css" rel="stylesheet">

    <script src="vendors/jquery/jquery.js"></script>
    <script src="vendors/angular/angular.js"></script>
    <script src="vendors/angular-ui-bootstrap/ui-bootstrap-tpls.js"></script>

    <script src="angular-toolkit.js"></script>

    <script src="scripts/dept-demo.js"></script>
    <script src="scripts/dept-search-demo.js"></script>
    <script src="scripts/number-demo.js"></script>
    <script src="scripts/index.js"></script>

    <style>
        .table-attr {
            font-family: Monaco Consolas;
        }

        .table-attr thead tr th {
            border-bottom: solid #F0AD4E 2px;
        }
    </style>
</head>
<body>
<div class="container">
    <a href="#AT_DEPT_DEMO__ID">Dept</a>
    <a href="#AT_DEPT_SEARCH_DEMO__ID">DeptSearch</a>
    <a href="#AT_NUMBER_DEMO__ID">Number</a>
    <!--region at.dept.demo-->
    <section id="AT_DEPT_DEMO__ID">
        <div ng-controller="atDeptDemoController">
            <div class="panel panel-primary">
                <div class="panel-heading">AT-DEPT 组织机构选择控件</div>
                <div class="panel-body">
                    <div>
                        <!--region AT-DEPT VIEWER-->
                        <div class="col-lg-6">
                            <h2>VIEWER</h2>
                            <hr>
                            <at-dept dept-source="source" ng-model="items" dept-options="{fenceMaxTotal: 4, singleSelect: false}"></at-dept>
                            <hr>
                            <button ng-click="initData1()" class="btn btn-primary">数据 I</button>
                            <button ng-click="initData2()" class="btn btn-primary">数据 II</button>
                            <button ng-click="openModel()" class="btn btn-danger">模态框</button>
                            <script type="text/ng-template" id="deptModel.html">
                                <div class="modal-header">
                                    <h3 class="modal-title" id="modal-title">AT-DEPT-MODEL</h3>
                                </div>
                                <div class="modal-body" id="modal-body">
                                    <at-dept dept-source="modelSource" ng-model="modelItems" dept-options="{fenceMaxTotal: 4, singleSelect: false}"></at-dept>
                                </div>
                            </script>
                            <hr>
                            <at-dept dept-source="source3" ng-model="aa"></at-dept>
                        </div>
                        <!--endregion-->

                        <!--region AT-DEPT ATTRIBUTE-->
                        <div class="col-lg-6">
                            <h2>ATTRIBUTE</h2>
                            <hr>
                            <table class="table table-attr">
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Def</th>
                                    <th>Type</th>
                                    <th colspan="3">Describe</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td><em>fenceMaxTotal</em></td>
                                    <td><code>3</code></td>
                                    <td><span class="label label-success">Number</span></td>
                                    <td colspan="3">
                                        <small>控件最大栏位数</small>
                                    </td>
                                </tr>
                                <tr>
                                    <td><em>singleSelect</em></td>
                                    <td><code>true</code></td>
                                    <td><span class="label label-success">Boolean</span></td>
                                    <td colspan="3">
                                        <small>选择模式: true为单选, false为多选</small>
                                    </td>
                                </tr>
                                <tr>
                                    <td><em>parentKey</em></td>
                                    <td><code>parent</code></td>
                                    <td><span class="label label-success">String</span></td>
                                    <td colspan="3">
                                        <small>dept-source数据源上级属性名dept-source</small>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!--endregion-->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--endregion-->

    <!--region at.dept.search.demo-->
    <section id="AT_DEPT_SEARCH_DEMO__ID">
        <div ng-controller="atDeptSearchDemoController">
            <div class="panel panel-primary">
                <div class="panel-heading">AT-DEPT-SEARCH 组织机构搜索控件</div>
                <div class="panel-body">
                    <div>
                        <!--region AT-DEPT-SEARCH VIEWER-->
                        <div class="col-lg-6">
                            <h2>VIEWER</h2>
                            <hr>
                            <at-dept-search></at-dept-search>
                        </div>
                        <!--endregion-->

                        <!--region AT-DEPT-SEARCH ATTRIBUTE-->
                        <div class="col-lg-6">
                            <h2>ATTRIBUTE</h2>
                            <hr>
                            <table class="table table-attr">
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Def</th>
                                    <th>Type</th>
                                    <th colspan="3">Describe</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td><em>fenceMaxTotal</em></td>
                                    <td><code>3</code></td>
                                    <td><span class="label label-success">Number</span></td>
                                    <td colspan="3">
                                        <small>控件最大栏位数</small>
                                    </td>
                                </tr>
                                <tr>
                                    <td><em>singleSelect</em></td>
                                    <td><code>true</code></td>
                                    <td><span class="label label-success">Boolean</span></td>
                                    <td colspan="3">
                                        <small>选择模式: true为单选, false为多选</small>
                                    </td>
                                </tr>
                                <tr>
                                    <td><em>parentKey</em></td>
                                    <td><code>parent</code></td>
                                    <td><span class="label label-success">String</span></td>
                                    <td colspan="3">
                                        <small>dept-source数据源上级属性名</small>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!--endregion-->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--endregion-->

    <!--at.number.demo-->
    <section id="AT_NUMBER_DEMO__ID">
        <div ng-controller="atNumberDemoController">
            <div class="panel panel-primary">
                <div class="panel-heading">AT-NUMBER 数字控件</div>
                <div class="panel-body">
                    <div>
                        <!--region AT-DEPT VIEWER-->
                        <div class="col-lg-6">
                            <h2>VIEWER</h2>
                            <hr>
                            <form>
                                <div at-number at-value="obj" at-class="{'form-control': true}"
                                           at-placeholder="{{placeholder}}"
                                           at-digit="2"
                                           at-required1="atRequired"
                                           at-on-change="atOnChange()"
                                           at-on-click="atOnClick()"
                                           at-disabled="false"></div>
                                <input type="submit" value="提交">
                                <input type="button" ng-click="changeAtRequired()" value="必填: {{atRequired}}">
                            </form>
                            <hr>
                            <div class="alert alert-info">当前值: {{obj ? obj : 'Null'}}</div>
                        </div>
                        <!--endregion-->

                        <!--region AT-DEPT ATTRIBUTE-->
                        <div class="col-lg-6">
                            <div>
                                <h2>ATTRIBUTE</h2>
                                <hr>
                                <table class="table table-attr">
                                    <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Def</th>
                                        <th>Type</th>
                                        <th colspan="3">Describe</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td><em>atValue</em></td>
                                        <td><code>null</code></td>
                                        <td><span class="label label-success">object</span></td>
                                        <td colspan="3">
                                            <small>设置控件的值</small>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><em>atDigit</em></td>
                                        <td><code>0</code></td>
                                        <td><span class="label label-success">Number</span></td>
                                        <td colspan="3">
                                            <small>保留小数位数</small>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><em>atPlaceholder</em></td>
                                        <td><code>null</code></td>
                                        <td><span class="label label-success">String</span></td>
                                        <td colspan="3">
                                            <small>控件输入提示</small>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><em>atRequired</em></td>
                                        <td><code>false</code></td>
                                        <td><span class="label label-success">Boolean</span></td>
                                        <td colspan="3">
                                            <small>是否必填</small>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><em>atDisabled</em></td>
                                        <td><code>false</code></td>
                                        <td><span class="label label-success">Boolean</span></td>
                                        <td colspan="3">
                                            <small>是否禁用</small>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><em>atMaxValue</em></td>
                                        <td><code>null</code></td>
                                        <td><span class="label label-success">Number</span></td>
                                        <td colspan="3">
                                            <small>最大值</small>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><em>atMinValue</em></td>
                                        <td><code>null</code></td>
                                        <td><span class="label label-success">Number</span></td>
                                        <td colspan="3">
                                            <small>最小值</small>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div>
                                <h2>FUNCTION</h2>
                                <hr>
                                <table class="table table-attr">
                                    <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Def</th>
                                        <th>Type</th>
                                        <th colspan="3">Describe</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td><em>atOnClick</em></td>
                                        <td><code>null</code></td>
                                        <td><span class="label label-success">onClick</span></td>
                                        <td colspan="3">
                                            <small>单击事件</small>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><em>atOnChange</em></td>
                                        <td><code>null</code></td>
                                        <td><span class="label label-success">onChange</span></td>
                                        <td colspan="3">
                                            <small>change事件</small>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!--endregion-->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--at.number.demo-->
</div>
</body>
</html>